<template>
<div class="page">
    <van-search
        v-model="searchvalue"
        shape="round"
        background="rgb(36,145,251)"
        :show-action='isfocus'
        placeholder="请输入搜索关键词"
        @focus="isfocus=true"
        @input="gettips"
        @search="getsearch({q:searchvalue})"
        @cancel="onCancel"
        
    />
    <div class="history">
        <!-- 历史记录 -->
        <searchhistory v-show="tiplist.length<=0&&searchvalue==''" />
    </div>
    <div class="tiplist">
        <!-- 搜索提示 -->
        <searchtiplist :tiplist='tiplist' v-show="tiplist[0]&&!resultshow" @getsearch='getsearch' /> 
    </div>
    <div class="result">
        <!-- 搜索结果 -->
        <searchresult v-if="resultshow" :querydata='querydata'/>
    </div>
</div>
</template>

<script>
import { Toast } from 'vant'
import { gettips } from '@/api/search'
import {setItem,getItem} from '@/utils/localfun'
import searchhistory from './SearchHistory'
import searchtiplist from './SearchTiplist'
import searchresult from './SearchResult'
export default {
  components: {
      searchhistory,
      searchtiplist,
      searchresult
  },
  props: {},
  data() {
    return {
        searchvalue:'',
        isfocus:false,
        tiplist:[],
        querydata:'',
        resultshow:false
    };
  },
  watch: {},
  computed: {},
  methods: {
    onCancel(){
        this.isfocus=false;
        this.tiplist=[];
        this.$router.go(-1)
    },
    async gettips(){
        this.resultshow=false
        if(this.searchvalue==''){
            this.tiplist=[]
            return
        }
        try{
            const {data} =await gettips(this.searchvalue)
            this.tiplist=data.data.options
            console.log(data.data.options)
        }catch{
            if(this.searchvalue){
                console.log('获取提示失败...')
            }
        }
    },
    getsearch(querydata){
        // console.log('getsearch')
        this.searchvalue=querydata.q
        let hasexist=this.$store.state.hislist.find((item)=>{return item==querydata.q})
        if(!hasexist){
            this.$store.commit('hisadd',querydata.q)
        }
        
        console.log('hisadd',this.$store.state.hislist)
        if(querydata.q){
            this.resultshow=true
            console.log(querydata.q)
            this.querydata=querydata.q
        }
        
    },
  },
  created() {},
  mounted() {}
};
</script>
<style lang="less" scoped>
.page{
    min-height:100vh;
    background:rgb(245,247,249);
    .van-search .van-cell{
        font-size:30px
    }
    .van-search__action{
        font-size:30px;
        color:white;
    }
}
.result{
    height: 91.5vh;
    /deep/.van-list{
        height: 100%;
        overflow: scroll;
    }
}
</style>